<template>
  <van-cell-group :title="t('cardDetail')">
    <div style="text-align:center;margin:16px 0;" v-if="card.headImg">
      <van-image :src="card.headImg" width="80" height="80" round />
    </div>
    <van-cell :title="t('name')" :value="card.name" />
    <van-cell :title="t('position')" :value="card.position" />
    <van-cell :title="t('company')" :value="card.company" />
    <van-cell :title="t('moblePhone')" :value="card.moblePhone" />
    <van-cell :title="t('phone')" :value="card.phone" />
    <van-cell :title="t('email')" :value="card.email" />
    <van-cell :title="t('workAddress')" :value="card.workAddress" />
    <div style="text-align:center;margin:16px 0;">
      <div>{{ t('vCardQr') }}</div>
      <van-image :src="card.vCardQrBase64" width="120" height="120" />
    </div>
  </van-cell-group>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { cardInfoApi } from '@/api/index';
import { showToast } from 'vant';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const route = useRoute();
const card = ref({});

onMounted(async () => {
  const id = route.params.id;
  try {
    const res = await cardInfoApi.getCardInfo(id);
    card.value = res.data.data || {};
  } catch (e) {
    showToast(t('fetchFail'));
  }
});
</script> 